.circle-out { position: relative; overflow: hidden;border-radius: 50%; }
.circle-out-left { position: absolute; top: 0; bottom: 0; left: 0; overflow: hidden; width: 50%;}
.circle-range-left { position: absolute; top: 0; left: 0; width: 200%; height: 100%; opacity: 0; border-radius: 50%;}
.circle-range-left .dot { position: absolute; top: 0; right: 0; overflow: hidden;width: 50%; height: 100%; }
.circle-range-left .dot:before {position: absolute; width: 200%; height: 100%;  content: ''; background: #fff;}
.circle-out-right { position: absolute; top: 0; right: 0; bottom: 0; overflow: hidden; width: 50%;}
.circle-range-right { position: absolute; top: 0; right: 0; width: 200%; height: 100%; opacity: 0; border-radius: 50%;}
.circle-range-right .dot { position: absolute; top: 0; left: 0; overflow: hidden;width: 50%; height: 100%; }
.circle-range-right .dot:before {position: absolute; width: 200%; height: 100%;  content: ''; background: #fff;}
.circle-inner { position: absolute; z-index: 9; top: 4px; right: 4px; bottom: 4px; left: 4px; color: #fff; border-radius: 50%; background: #3ec2f2;}
.ui-center { font-size: 12px; display: -webkit-box; width: 100%; height: 100%; text-align: center; -webkit-box-orient: vertical; -webkit-box-pack: center; -webkit-box-align: center;}
.ui-center .num { font-size: 24px; display: inline-block; text-align: center;}
.ui-center .num span { font-size: 48px; line-height: 48px; display: inline-block; width: 30px;}
.ui-center .num span.text-dot { width: 3px; height: 3px; margin: 0 4px;border-radius: 3px; background: #fff; }
.widget-css-1 {display: none; width:${wh.value}px;height: ${wh.value}px; background: ${bg.value};}
